<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-2.1.0.js"></script>
	</head>

	<body>
		<div class="b_bg">
			<div class="c_bg">
				<div id="c_zhuce">
					<ul>
						<li><span id="span_phone">手机注册</span></li>
						<li><span id="span_email">手机注册</span></li>
					</ul>
				</div>
				<div class="cla"></div>
				<div id="i_left">
					<div>
						<ul>
							<li><input type="email" name="email" id="email" placeholder="请输入邮箱" /><span></span></li>
							<li><input type="text" name="uname" id="uname" placeholder="请输入用户名" /><span></span></li>
							<li><input type="password" name="upass" id="upass" placeholder="请输入密码" />
								<spam></spam>
							</li>
							<li><input type="password" name="rupass" id="rupass" placeholder="请再次输入密码" /><samp></samp></li>
							<li><input type="text" name="varify" id="varify" placeholder="请输入验证码" /><img src="img/59a11fa7365d1.png" /></li>
						</ul>
					</div>
					<div class="tiaokuan">
						<input type="checkbox" id="checkbox" name="checkbox" />同意
						<a>用户服务条款</a>

					</div>
					<div>
						<input type="submit" id="subimt" name="subimt" value="同意" />
					</div>
				</div>
				<div id="i_right">

				</div>

			</div>
		</div>

	</body>
	<script>
		$(function(){
			$("#email").blur(checkMail);
			$("#uname").blur(checkName);
			$("#upass").blur(checkPass);
//			$("#rupass").blur(checkRPass);
//			$("#varify").blur(checkVarify);
			
			function checkName(){
				var names = $("#uname");
				var reg = /^[u4E00-u9FA5]+$/;
				if(reg.test(names.val())){
				 	names.next().html("√").css("color","green");
				 	return true;
				 }
				 names.next().html("×你输入的用户名错误").css("color","red");
				 return false;
			}
			
			
			function checkPass(){
				var upass = $("#upass");
				var reg = /^[\w]{6,}$/;
				if(reg.test(upass.val())){
				 	upass.next().html("√").css("color","green");
				 	return true;
				 }
				 upass.next().html("×你输入的密码格式错误").css("color","red");
				 return false;
			}
			function checkMail(){
				var email = $("#email");
				//检验邮箱的正则表达式
				 var filter  = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
				 if(filter.test(email.val())){
				 	email.next().html("√").css("color","green");
				 	return true;
				 }
				 email.next().html("×你输入的电子邮件格式错误").css("color","red");
				 return false;
			}
			
			$("#subimt").click(function(){
				var sub = checkName()&checkMail()&checkPass();
				
				return sub > 0;
			});
		});
	</script>
	<style>
		#subimt {
			background-color: aqua;
			color: white;
			margin-left: 80px;
			border: 0 none;
			margin-top: 25px;
			/*cursor: pointer;*/
			width: 200px;
			height: 40px;
			line-height: 40px;
			font-size: 14px;
			border-radius: 8px;
		}
		
		.tiaokuan {
			margin-top: 30px;
			margin-left: 100px;
		}
		
		#i_left ul {
			margin-top: 40px;
		}
		
		#i_left ul li input {
			background-position-x: 6px;
			margin-top: 20px;
			margin-left: 50px;
			width: 312px;
			font-size: 14px;
			height: 40px;
			line-height: 40px;
			text-indent: 40px;
			border: 1px #d7d7d7 solid;
			background-image: url(img/login-input2.png);
			background-repeat: no-repeat;
			background-position-y: 10px;
		}
		
		#span_phone {
			width: 130px;
			height: 40px;
			background-color: blue;
			color: white;
			display: block;
			text-align: center;
			padding-top: 10px;
			margin-top: 12px;
		}
		
		#span_email {
			padding-top: 10px;
			text-align: center;
			width: 130px;
			height: 40px;
			background-color: white;
			color: blue;
			display: block;
		}
		
		#c_zhuce ul li {
			text-align: left;
			display: inline-block;
		}
		
		* {
			margin: 0px;
			padding: 0px;
		}
		
		#i_right {
			background-color: white;
			height: 480px;
			width: 352px;
			border: 1px solid chartreuse;
			float: right;
		}
		
		#i_left {
			background-color: white;
			float: left;
			float: left;
			width: 608px;
			height: 480px;
			border: 1px solid black;
		}
		
		#c_zhuce {
			width: 100%;
			height: 60px;
			border: 1px solid blue;
		}
		
		.cla {
			clear: both;
		}
		
		.b_bg {
			width: 100%;
			height: 650px;
			border: 1px solid red;
			margin-top: 100px;
			background-image: url(img/reg-mobile.jpg);
		}
		
		.c_bg {
			width: 965px;
			height: 540px;
			border: 1px solid red;
			align-content: center;
			/*text-align: center;*/
			margin: 0 auto;
			margin-top: 40px;
		}
	</style>

</html>